<template>
  <div class="demo1">
    <div class="topTitle">
      <div class="m-10 shopTitle"><van-icon class="mr-5" name="star-o" />第六感美发沙龙<van-icon class="ml-5" name="arrow" /></div>
      <div class="ml-10 tipTitle">距您100m</div>
      <div class="notice flex" >
        <van-notice-bar left-icon="volume-o" :scrollable="false">
          <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="3000"
            :show-indicators="false"
          >
            <van-swipe-item>内容 1</van-swipe-item>
            <van-swipe-item>内容 2</van-swipe-item>
            <van-swipe-item>内容 3</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
        <div class="more" @click="showPopup">更多<van-icon class="ml-5" name="arrow-down" /></div>
      </div>
    </div>
    <div class="container">
      <div class="navUl">
        <div
          class="navLi"
          v-for="(item, index) in navList"
          :class="{ active: num === index }"
          :key="index"
          @click="navClick(index)"
        >
          <van-image v-show="num === index" height="100%" src="https://e.im5i.com/2021/07/29/t8bFG.png" class="p-5" />
          {{ item.navName }}
        </div>
      </div>
      <div class="contScroll">
        <div id="swipe">
          <swiper :list="swiperList" height="100%"></swiper>
        </div>
        <div
          class="navLi"
          v-for="(item, index) in navList"
          :id="'div'+index"
          :key="index"
          @click="navClick(index)"
        >
          <div class="p-10 tipTitle2">{{item.navName}}</div>
          <div class="item flex m-10 mb-20" v-for="item2 in item.children" :key="item2.id">
            <van-image width="135px" height="90px" :src="item2.image[0].imgUrl" class="" />
            <div>
              <div class="ml-10 tipTitle2">{{item2.name}}</div>
              <div class="ml-10 mt-5 tipTips">{{item2.text}}</div>
              <div class="ml-10 mt-5 money">￥ {{item2.money}} <van-tag round type="primary" size="large" class="ml-20" @click.prevent="chooseShop(item2)">选规格</van-tag></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 更多信息 -->
    <more-card v-model:type="show"></more-card>
    <!-- 商品详情 -->
    <shop-card v-model:shopInfo="shopInfo" v-model:itemInfo="itemInfo" @cus-event="addMyShop()"></shop-card>
    <!-- 订单列表 -->
    <order-card v-model:orderInfo="orderInfo" v-model:orderList="orderList" @clear-choose="clearChoose()" @edit-total="editTotal()"></order-card>
    <!-- 提交结算 -->
    <van-submit-bar v-show="submitOrder" :price="totalPrice*100" button-text="结算" @submit="onSubmit" style="z-index: 3001;">
      <van-icon :name="orderInfo?'arrow-down':'arrow-up'" @click="orderPopup" />
    </van-submit-bar>
  </div>
</template>
<script>
import { reactive, toRefs, ref, provide } from "vue";
import swiper from "@/components/Swiper";
import moreCard from "./components/moreCard.vue";
import shopCard from "./components/shopCard.vue";
import orderCard from "./components/orderCard.vue";
import { Toast } from 'vant'
export default {
  name: "list",
  components: {
    swiper,
    moreCard,
    shopCard,
    orderCard,
  },
  setup() {
    const state = reactive({ 
      navList: [
        { navName: "技术百科", children: [] },
        { navName: "传播趋势", children: [] },
        { navName: "网民态度", children: [] },
        { navName: "国家政策", children: [] },
        { navName: "行业之声", children: [] },
        { navName: "突出问题", children: [] },
        { navName: "「设置好的」", children: [] },
        { navName: "「测试数据」", children: [] },
        { navName: "「测试呀呀」", children: [] },
        { navName: "「风格特色」", children: [] },
        { navName: "「真的不错」", children: [] },
        { navName: "「假的吧喔」", children: [] },
        { navName: "「聚吧你去」", children: [] },
        { navName: "我天天向上的", children: [] },
      ],
      num: 0,
      swiperList: [
          {imgUrl: "https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-mate40.png"},
          {imgUrl: "https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner1.png"},
          {imgUrl: "https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner2.png"},
        ], // 轮播图列表
    });
    // 模拟数据
    const list =state.navList
    var id = 0
    list.forEach(item => {
      for (let i = 0; i < 5; i++) {
        const info = {
          id:0,
          image:[
            {imgUrl:'https://img.yzcdn.cn/vant/cat.jpeg'},
            {imgUrl: "https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-mate40.png"},
            {imgUrl: "https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner1.png"},
            {imgUrl: "https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner2.png"},
          ],
          num:1,
          name:'洗剪吹'+id,
          text:'精致的工艺品精致的工艺品精致的工艺品精致的工艺品精致的工艺品精致的工艺品精致的工艺品',
          money:id,//998,
          amount:10,
          projList:[//项目详情
            {
              name:'洗剪吹',
              fate:1,
              price:120+id,
              job:'资深设计师'
            },
            {
              name:'洗吹',
              fate:1,
              price:100+id,
              job:'资深设计师'
            },
            {
              name:'吹',
              fate:1,
              price:40+id,
              job:'资深设计师'
            },
            {
              name:'泰式洗头',
              fate:1,
              price:60+id,
              job:'资深按摩师'
            },
          ],
          noticeList:[
            {
              title:'有效期限',
              children:[
                {text:'永远有效'+id}
              ]
            },
            {
              title:'预约信息',
              children:[
                {text:'请您提前2小时预约'+id}
              ]
            },
            {
              title:'适用人数',
              children:[
                {text:'每张券限定一个人使用'+id}
              ]
            },
            {
              title:'规则提醒',
              children:[
                {text:'不再与其他优惠同享'+id}
              ]
            },
            {
              title:'温馨提示',
              children:[
                {text:'下单前可打电话咨询'+id}
              ]
            },
          ],
        }
        id++
        item.children.push(info)
      }
    });
    // 滚动tab start
    const handleScroll = e => {
      if(e.target == document.querySelector('div.navUl')) return //是tabNav滚动,不发生改变,直接退出
      let scrollTop =
        e.target.scrollTop ||
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; // 滚动条偏移量
      let num = state.navList.length;
      for (let n = 0; n < num; n++) {
        if (document.querySelector("#div" + n).offsetTop < scrollTop + 20) {
          state.num = n;
        }
      }
    }
    const navClick = index => {
      var scrollBox1 = document.querySelector(".contScroll");
      state.num = index;
      let navPage = document.querySelector("#div" + index);
      scrollBox1.scrollTo(0, navPage.offsetTop);
    }
    document.addEventListener("scroll", handleScroll, true);
    // 滚动tab end

    // 更多信息
    const show = ref(false);
    provide("type", show);
    const showPopup = () => {
      show.value = true
      console.log(show);
    };
    // 商品规格
    const itemInfo = ref({})
    const shopInfo = ref(false);//订单列表详情
    provide("shopInfo", shopInfo);
    provide("itemInfo", itemInfo);
    const chooseShop = (item)=>{
      console.log(item);
      const list = item.projList
      var sum = 0
      list.forEach(item => {
        sum += item.price*item.fate
      });
      item.originPrice = sum;
      itemInfo.value = item;
      shopInfo.value = true;
    }

    const orderList = ref([])
    const totalize = ()=>{//计算订单总价
      const list = orderList.value
      var sum = 0
      list.forEach(item => {
        sum += item.money*item.num
      });
      totalPrice.value = sum
    }
    

    const addMyShop = () =>{
      orderList.value.push(itemInfo.value)
      totalize()
      shopInfo.value = false;
      submitOrder.value = true;
    }  
    // 结算
    const submitOrder = ref(false) 
    const onSubmit = () => Toast('点击按钮');
    const orderInfo = ref(false);//订单列表详情
    const orderPopup = () => {
      orderInfo.value = !orderInfo.value;
    };
    const clearChoose = () => {
      console.log('清空购物袋');
      submitOrder.value = false;
      orderInfo.value = false;
      orderList.value = []
    };
    const editTotal = () => {
      totalize()
    };
    const numValue = ref(1);
    const totalPrice = ref(30.50)//总金额
    return {
      ...toRefs(state),
      navClick,
      show,
      showPopup,
      orderPopup,
      onSubmit,
      submitOrder,
      orderInfo,
      orderList,
      chooseShop,
      addMyShop,
      shopInfo,
      itemInfo,
      numValue,
      totalPrice,
      editTotal,
      clearChoose,
    };
  },
};
</script>
<style scoped lang="less">
.demo1 {
  .topTitle{
    // position: relative;
    // z-index: 3000;
    .shopTitle{
      font-size: 16px;
    }
    .notice{
      .van-notice-bar{
        padding: 0 10px;
        background: none;
        color: #8F8B8B;
        height: 1rem;
        width: 80%;
      }
      .more{
        width: 20%;
      }
      .notice-swipe {
        height: 40px;
        line-height: 40px;
        .van-swipe-item{
          overflow:hidden;  //超出部分隐藏
          text-overflow:ellipsis;  //超出部分显示...
          white-space:nowrap;  //文本强制一行显示   
        }
      }
    }
  }
  .tipTitle{
    font-size: 14px;
    color: #777;
  }
  .tipTitle2{
    font-size: 14px;
    color: #646566;
  }
  .container {
    width: 100%;
    position: absolute;
    top: 100px;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow: auto;
    height: calc(100vh - 1.3333rem - 100px);
    .navUl {
      width: 100px;
      position: fixed;
      background: #ebebeb;
      overflow-y: auto;
      height: calc(100vh - 1.3333rem - 100px);
      .navLi {
        width: 100%;
        padding: 15px 0;
        box-sizing: border-box;
        text-align: center;
        border-bottom: 1px solid #fff;
        cursor: pointer;
      }
      .navLi.active {
        background: #fc9103;
        color: #fff;
      }
    }
    .contScroll {
      width: calc(100% - 102px);
      margin-left: 102px;
      overflow-x: hidden;
      div {
        width: 100%;
      }
      #swipe {
        height: 120px;
        padding: 5px;
        padding-top: 0;
        box-sizing: border-box;
        border-radius: 10px;
        .van-swipe{
          border-radius: 10px;
        }
      }
      .tipTips{
        font-size: 12px;
        color: #777;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: calc(100% - 40px);
        box-sizing: border-box;
      }
      .money{
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  
}
</style>
